<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        p{
            color: green;
        }

        a{
            color: black;
            text-decoration: none;/* 去除下划线 */
        }

        .chicken{
            color: red;
        }

        .men{
            font-size: 20px;
            color: yellow;
        }

        #duck{
            color: grey;
        }
    </style>
</head>
<body>
    <!-- 
        name: 给标签取个大名
        class: 给标签取个绰号
        id: 给标签取个身份证号

        1. 基础选择器
            标签选择器
                标签名{
                    属性名: 属性值;
                    属性名: 属性值;
                    ...
                }

                特性:
                *匹配范围比较广,适合做初始化
                *
            类选择器(class)
                .class名{
                    属性名:属性值;
                    属性名:属性值;
                    ...
                }

                特性:
                * 一个标签可以有多个class
                * 多个标签可以有相同的class
                
            身份选择器(id)
                #id名{
                    属性名:属性值;
                    属性名:属性值;
                    ...
                }

                特性:
                * 一个标签只能有1个id
                * 在css中,id重复后没有影响,但是在js中,id一旦重复,发生问题(建议:保持id的唯一性)
                

            注意:
                * class和id选择器 区分大小写
     -->
    <p>蓉易出轨, 宝受委屈</p>
    <p>璐出马脚, 贾装没事</p>
    <p>百年好合, 风雨同舟</p>

    <a href="http://www.baidu.com">baidu</a>
    <a href="http://www.taobao.com">taobao</a>
    <a href="http://www.qq.com">tencent</a>

    <ul>
        <li class="chicken men">黄焖鸡</li>
        <li id="duck">老鸭粉丝汤</li>
        <li id="duck">麻辣烫</li>
        <li class='chicken'>白斩鸡</li>
    </ul>
</body>
</html>